/*
 * heiniusong@tencent.com
 * pcpush新手引导
 * 2013-11-19
*/
/*@import "./base.less";
@import "./config.less";
@import "../../util/effect.less";*/

/*
.pc-popup{
	width: 740px;height: 450px;z-index: 9999; left: 50%; margin: -190px 0px 0px -370px; position: fixed; top: 50%;
	.pcpush-box{height: 100%;overflow: hidden;}
	.pcpush-con{width: 100%;height: 100%;}
	ul li,
	.arrow a,
	li a{background-position: center top;background-repeat: no-repeat;-webkit-transition: background-image 0.2s ease-in-out;}

	ul{
		width: 3000px;height: 100%;position: relative;left:0;
		li{width:740px;height:100%;float: left}
		li.step1{background-image: url("@{img-pre-path}/pcpush/20131206/step1.png@{timestamp}");}
		li.step2{background-image: url("@{img-pre-path}/pcpush/20131206/step2.png@{timestamp}");background-position-y:70px;}
		li.step3{background-image: url("@{img-pre-path}/pcpush/20131206/step3.png@{timestamp}");}
		li.step4{
			background-image: url("@{img-pre-path}/pcpush/20131206/step4.png@{timestamp}");position: relative;
			a{background-image: url("@{img-pre-path}/pcpush/btn-ex.png@{timestamp}"); display: block;width:191px;height: 42px;cursor: pointer;text-indent: -500px;overflow: hidden;position: relative;top:400px;left:275px;}
			a:hover{background-position-y: -42px;}
			a:visited, a:link, a:active{background-position-y: -84px;}	
		}
	}
	.arrow{
		.left,
		.right{position: absolute;display: block;width:57px;height: 31px;top:190px;text-indent: -500px;overflow: hidden;cursor: pointer;}
		.left{background-image: url("@{img-pre-path}/pcpush/arrow-left.gif@{timestamp}");left:-57px;display: none;}
		.right{background-image: url("@{img-pre-path}/pcpush/arrow-right.gif@{timestamp}");right: -57px;}
	}
	
}
.pcpush-mask{
	width: 100%;height: 100%;background-color:rgba(255,255,255,0.95);-webkit-transition:background-color 0.25s;position: absolute;top:0;height: 0;z-index: 999;
	.close{position:absolute;right: 15px;top:15px;padding: 2px;font-size: 14px;}
	.close:hover{cursor: pointer;}
}
*/
@img-pre-path : "../img";
/* 新手引导改版 */
.pcPushGuideCss3{
	position: absolute;
	width: 100%;
	height: 100%;
	z-index : 999;
	left:0;
	top:0;
	.intro_bg{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.8);
		/*z-index: 999;*/
	}
	.intro_bg_hide{
		-webkit-animation: intro_bg 2s forwards;
	}
	@-webkit-keyframes intro_bg {
		0%{
			opacity: 1;
		}
		100%{
			opacity: 0;
		}
	}
	.music_mask{
		position: absolute;
		left: 50%;
		top: 230px;
		z-index: -1;
		margin-left: -242px;
		background: url("@{img-pre-path}/pcpush/music_mask.png") no-repeat;
		width: 233px;
		height: 100px;
	}
	.first{
		position: absolute;
		left: 50%;
		top: 10px;
		z-index: 9;
		margin-left: -245px;
		background: url("@{img-pre-path}/pcpush/first.png") no-repeat;
		width: 490px;
		height: 320px;
	}
	.i_konw{
		position: absolute;
		bottom: 0;
		left: 165px;
		display: block;
		width: 160px;
		height: 42px;
	}
	.screen{
		position: absolute;
		left: 50%;
		top: 75px;
		width: 550px;
		height: 400px;
		margin-left: -275px;
	}

	.close{
		position: absolute;
		right: -205px;
		top: -67px;
		font-size: 18px;
		color: #FFF;
		cursor: pointer;
	}
	/*动画一的时间是5s*/
	.step1{
		-webkit-transition:1s linear all;
	}
	.step1 .w1{
		position: absolute;
		left: 360px;
		top: 70px;
		width: 246px;
		height: 36px;
		background: url("@{img-pre-path}/pcpush/w1.png") no-repeat;
		opacity: 0;
		left: 300px;
		-webkit-animation: w1 15s;
	}
	@-webkit-keyframes w1 {
		10%{
			opacity: 0;
			left: 360px;
		}
		15%{
			opacity: 1;
			left: 270px;
		}
		100%{
			left: 270px;
			opacity:1;
		}
	}
	.step1 .w2{
		position: absolute;
		left: 160px;
		top: 70px;
		width: 203px;
		height: 47px;
		opacity:0;
		background: url("@{img-pre-path}/pcpush/w2.png") no-repeat;
		-webkit-animation: w2 15s;
	}
	@-webkit-keyframes w2 {
		10%{
			opacity: 1;
			left: 50px;
		}
		15%{
			-webkit-transform: rotate(0deg);
		}
		16%{
			-webkit-transform: rotate(3deg);
		}
		18%{
			-webkit-transform: rotate(-3deg);
		}
		19%{
			-webkit-transform: rotate(0deg);
		}
		100%{
			left: 50px;
			opacity:1;
		}
	}
	.step1 .w3{
		position: absolute;
		left: 33px;
		top: 152px;
		width: 233px;
		height: 100px;
		opacity: 0;
		background: url("@{img-pre-path}/pcpush/w3.png") no-repeat;
		-webkit-animation: w3 5s 4s forwards;
	}
	@-webkit-keyframes w3 {
		20%{
			opacity:1;
		}
		100%{
			opacity: 1;
		}
	}
	.step1 .w31{
		position: absolute;
		left: 99px;
		top: 61px;
		width: 83px;
		height: 22px;
		cursor: pointer;
		outline: 1px #50c052 solid;
		/*border: 5px transparent solid;*/
		border-radius: 2px;
		box-shadow: 0 0 0px #0F0;
		-webkit-animation: w31 1s 6s;
		-webkit-animation-iteration-count:infinite;
	}
	@-webkit-keyframes w31 {
		50%{
			outline-width: 3px;
			/*box-shadow: 0 0 20px #0F0;*/
			/*border-color: #50c052;*/
		}
	}
	.step1 .w14{
		position: absolute;
		left: 180px;
		top: 100px;
		width: 110px;
		height: 101px;
		opacity:0;
		background: url("@{img-pre-path}/pcpush/w14.png") no-repeat;
		-webkit-animation: w14 1s 5s forwards;
	}
	@-webkit-keyframes w14 {
		100%{
			opacity:1;
			top: 80px;
		}
	}
	/*手机QQ的动画时间是17s*/
	.step2 .w5{
		position: absolute;
		left: 60%;
		top: 90px;
		width: 202px;
		height: 281px;
		margin-left: -100px;
		opacity:0;
		background: url("@{img-pre-path}/pcpush/w5.png") no-repeat;
		-webkit-animation: w5 17s 0s;
	}
	@-webkit-keyframes w5 {
		10%{
			opacity:1;
			left: 50%;
		}
		90%{
			opacity:1;
			top: 90px;
		}
		100%{
			opacity:0;
			top: 120px;
			left: 50%;
		}
	}
	.step2 .w51{
		position: absolute;
		left: -45px;
		top: -64px;
		width: 286px;
		height: 31px;
		opacity:0;
		background: url("@{img-pre-path}/pcpush/w51.png") no-repeat;
		-webkit-animation: w51 14s 1s;
	}
	@-webkit-keyframes w51 {
		10%{
			opacity:1;
		}
		100%{
			opacity:1;
		}
	}
	.step2 .w5_inner{
		position: absolute;
		left: 25px;
		top: 22px;
		width: 130px;
		height: 217px;
		overflow: hidden;
		
	}
	.step2 .w52{
		position: absolute;
		left: 130px;
		top: 0;
		width: 130px;
		height: 217px;
		background: url("@{img-pre-path}/pcpush/w52.png") no-repeat;
		-webkit-animation: w52 5s 3s;
	}
	@-webkit-keyframes w52 {
		20%{
			left: 0;
		}
		70%{
			background: url("@{img-pre-path}/pcpush/w52.png") no-repeat;
		}
		80%{
			left: 0;
			background: url("@{img-pre-path}/pcpush/w53.png") no-repeat;
		}
		100%{
			left: -130px;
		}
	}
	.step2 .w53{
		position: absolute;
		left: 130px;
		top: 0;
		width: 130px;
		height: 217px;
		background: url("@{img-pre-path}/pcpush/w54.png") no-repeat;
		-webkit-animation: w53 5s 7s;
	}
	@-webkit-keyframes w53 {
		20%{
			left: 0;
		}
		70%{
			background: url("@{img-pre-path}/pcpush/w54.png") no-repeat;
		}
		80%{
			left: 0;
			background: url("@{img-pre-path}/pcpush/w55.png") no-repeat;
		}
		100%{
			left: -130px;
		}
	}
	.step2 .w54{
		position: absolute;
		left: 130px;
		top: 0;
		width: 130px;
		height: 217px;
		background: url("@{img-pre-path}/pcpush/w56.png") no-repeat;
		-webkit-animation: w54 5s 11s forwards ;
	}
	@-webkit-keyframes w54 {
		20%{
			left: 0;
		}
		80%{
			left: 0;
			background: url("@{img-pre-path}/pcpush/w56.png") no-repeat;
		}
		100%{
			left: 0;
		}
	}

	.step2 .w54_bar{
		position: absolute;
		left: 6px;
		top: 86px;
		background: url("@{img-pre-path}/pcpush/bar.png") repeat-x;
		width: 2px;
		height: 13px;
		-webkit-animation: w54_bar 2s 12s forwards;
	}
	@-webkit-keyframes w54_bar {
		100%{
			width: 121px;
		}
	}
	.step2 .w54_num{
		position: absolute;
		left: 45px;
		top: -2px;
		color: #FFF;
		opacity:0;
		font-size: 13px;
		-webkit-animation: w54_num .5s 14s forwards;
	}
	@-webkit-keyframes w54_num {
		100%{
			opacity:1;
		}
	}
	.step3{

	}
	.step3 .w6{
		position: absolute;
		left: 50%;
		top: 170px;
		width: 235px;
		height: 131px;
		margin-left: -127px;
		opacity:0;
		background: url("@{img-pre-path}/pcpush/w6.png") no-repeat;
		-webkit-animation: w6 2s 0s forwards;
	}
	@-webkit-keyframes w6 {
		100%{
			opacity:1;
			top: 108px;
		}
	}
	.w7{
		display: none;
	}
	.step3 .w7{
		display: block;
		position: absolute;
		left: 50%;
		top: 330px;
		width: 160px;
		height: 42px;
		margin-left: -80px;
		text-align: center;
		line-height: 42px;
		color: #FFF;
		font-size: 18px;
		opacity:0;
		cursor: pointer;
		background-color: #55c157;
		-webkit-animation: w7 2s 1s forwards;
	}
	@-webkit-keyframes w7 {
		100%{
			opacity:1;
			top: 290px;
		}
	}

	@media screen and (min-width: 1240px) {
		body{
			background: url("@{img-pre-path}/pcpush/body1240.png") no-repeat center top;
			width: 1300px;
			height: 960px;
		}
		.close{
			right: -317px;
		}
		.music_mask{
			
			margin-left: -363px;
		}
		.step1 .w3{
			left: -90px;
		}
	}
}
